<template>
    <div class="app-container">
        <!-- 左侧的菜单容器 -->
        <div class="menu-container">
            <div class="logo-box">
                <img src="./assets/img/xl.png" />
                <h4>向勇基建大队</h4>
            </div>
            <div class="menu-box">
                <router-link to="/">首页</router-link>
                <router-link to="/gm">商品管理</router-link>
                <router-link to="/om">订单管理</router-link>
                <router-link to="/fm">财务管理</router-link>
                <router-link to="/da">数据分析</router-link>
                <router-link to="/sys">系统设置</router-link>
            </div>
        </div>
        <!-- 右侧的容器 -->
        <div class="main-container">
            <div class="header-container">
              <div class="head">
                    <i class="fa fa-tasks" id="rw">任务</i>
                    <i class="fa fa-envelope-o" id="xx">消息</i>
                    <i class="fa fa-user" id="ssw">杀生丸</i>
                </div>
            </div>
            <div class="body-container">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
module.exports = {
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>
<style scoped>
.app-container {
    width: 1400px;
    height: 650px;
    background-color: rgb(218, 218, 238);
    margin: auto;
    display: flex;
}

.menu-container {
    width: 160px;
    background-color: darkcyan;
}

.menu-container .logo-box {
    text-align: center;
    padding: 20px 0px;
   
   /*  width: 50px;
    height: 70px; */
    border-radius: 50%;
    overflow: hidden;
}

.menu-container .logo-box img {
    width: 50px;
    height: 50px;
     border-radius: 50%;
}

.menu-container .menu-box a {
    display: block;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.menu-container .menu-box a:hover {
    background-color: rgb(51, 185, 163);
}

.main-container {
    width: 100%;
}

.header-container {
    background-color: darkcyan;
    color: white;
    height: 80px;
}

.router-link-exact-active {
    background-color: rgb(52, 204, 209);
}


 .head{
      /*   height: 45px;    
        background-color: darkcyan; */
        position: relative;
        overflow: visible;
        top:30px

        
    }
    #rw{
        left: 70%;
        position: absolute;
    }
    #xx{
        left:80%;
        position: absolute;
    }
    #ssw{
        left:90%;
        position: absolute;
    }
</style>